<template>
    <div id="weiCode">  <el-row :gutter="10" style="margin-bottom: 12px">
      <el-col :span="6" style="justify-content: space-around;align-items: center">
        <h3>微信扫码统计列表</h3>
      </el-col>
      <el-col :span="6" class="flex" style="justify-content: space-around;align-items: center">
        <span class="nowrap" style="padding-right: 6px">开始时间</span>

        <el-date-picker   style="width: 100%" size="small"
                          v-model="form.beginTime"
                          type="datetime"
                          placeholder="选择日期时间">
        </el-date-picker>
      </el-col>
      <el-col class="flex" :span="6" style="justify-content: space-around;align-items: center">
        <span class="nowrap" style="padding-right: 6px">结束时间</span>

        <el-date-picker  size="small"
                         style="width: 100%"
                         v-model="form.endTime"
                         type="datetime"
                         placeholder="选择日期时间">
        </el-date-picker>
      </el-col>
      <el-col class="flex" :span="6" style="justify-content: flex-start;align-items: center">
        <el-button type ="primary" size ="small" @click = 'getCountList'>查询</el-button>
      </el-col>
    </el-row>

         <div class="mian">

           <el-table :data="tableData" border style="width: 100%">
             <el-table-column  type="index">
             </el-table-column>
             <el-table-column prop="cardNo" label="卡号">
             </el-table-column>
             <el-table-column prop="totalMoney" label="交易额">
             </el-table-column>

           </el-table>
         </div>

    </div>
</template>

<script>
    export default {
        data () {
            return {
              value1:'',
              tableData: [],
              form:{
                beginTime:'',
                endTime:'',
                payType:6
              }
            }
        },
      created(){
        //  this.getCountList()
      },
        methods: {
            getCountList(){
                 for(let i in this.form){
                     if(isNaN(this.form[i])){
                       console.log(this.form[i]);
                       delete this.form[i]
                     }
                     if(this.form[i] == ''){
                       delete this.form[i]
                     }
                 }
                 if(this.form.beginTime){
                   this.form.beginTime = Date.parse(this.form.beginTime);
                 }
                if(this.form.endTime){
                  this.form.endTime = Date.parse(this.form.endTime);
                }

                 this.$api.getCountList(this.form).then(res =>{
                   if(res.code == '000000'){
                      console.log(res.data);
                      this.tableData =res.data;

                      this.$message({
                        type:'success',
                        message:'获取统计列表成功'
                      })
                   }
                 })
            }
        }


    }
</script>

<style lang="less">
   #weiCode{
     th{
       text-align: center;
     }
      .header{
        display: flex;
        justify-content: center;
        .date_box{
          padding:10px;
          font-size: 14px;
          align-self:center;
          margin: 0 20px;
          input{
            height:30px;
          }
        }
        .button_box{
          align-self:center;
        }
      }
   }
</style>
